<template>
  <div class="use_info">
    <div class="avatar">
      <img :src="avatar" alt="" />
    </div>
    <div class="usrName">{{ info.userName || '-' }}</div>
    <div class="role">{{ info.remark || '-' }}</div>
    <div class="phone">
      <img :src="phone" alt="" />
      <span>{{ info.phonenumber || '-' }}</span>
    </div>
    <div class="fixed">
      <van-button @click="onRemoveBind" :loading="loading">解绑</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import phone from '@/assets/images/phone.png'
import avatar from '@/assets/images/avatar.png'
import { cancelBindUser } from '@/api/login'
import { useUserStore } from '@/stores/modules'
import { profile } from '@/api/my'
import { ref } from 'vue'
import router from '@/router'
const userInfo = useUserStore()
const loading = ref(false)
const info = ref({
  userName: '',
  remark: '',
  phonenumber: '',
})
const init = async () => {
  const result = await profile()
  info.value = result.data
}
init()
const onRemoveBind = async () => {
  loading.value = true
  const result = await cancelBindUser(userInfo.openId)
  loading.value = false
  if (result.code !== 200) return
  userInfo.CLEAR_INFO()
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.use_info {
  padding: 118px 30px 30px;
  background: linear-gradient(180deg, #e2f5fb 0%, #ffffff 64%);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  .avatar {
    width: 160px;
    height: 160px;
    img {
      width: 100%;
      height: 100%;
    }
    margin-bottom: 10px;
  }
  // .info {
  //   font-size: 34px;
  //   padding-left: 28px;
  //   margin-bottom: 20px;
  // }
  .phone {
    display: flex;
    align-items: flex-start;
    font-size: 38px;
    img {
      height: 36px;
      width: 36px;
    }
  }
  .userName {
    font-size: 36px;
    color: #121212;
    line-height: 36px;
  }
  .role {
    font-size: 30px;
    color: #969999;
    line-height: 30px;
    margin: 24px 0 42px;
  }
  .fixed {
    position: fixed;
    bottom: 182px;
    width: 80%;
    :deep(.van-button) {
      width: 100%;
      // border: none;
    }
  }
}
</style>
